<template>
  <div class="home">
    <app-header :back="false" titleContent="首页" rightTitle="首页测试"></app-header>
    <swiper :list="dataList" auto loop @on-index-change="onIndexChange" dots-position="right" style="width:100%;margin:0 auto;" :aspect-ratio="300/800"></swiper>
    <!-- <swiper :list="dataList" auto @on-index-change="onIndexChange" dots-position="center"></swiper> -->
    <swiper auto loop height="30px" direction="vertical" class="text-scroll" :show-dots="false">
      <swiper-item><p><span style="color: red;margin:0 10px">荐</span> 完成传奇世界H5-王者归来任务 获得20金币</p></swiper-item>
      <swiper-item><p><span style="color: green;margin:0 10px">热</span>基本世神 兑换《传奇世界H5》畅玩级礼包</p></swiper-item>
      <swiper-item><p><span style="color: blue;margin:0 10px">荐</span>零哥章魚 完成传奇世界H5-王者归来任务</p></swiper-item>
      <swiper-item><p><span style="color: orange;margin:0 10px">旺</span>做迎而為 兑换【饿了么】畅享美食红包</p></swiper-item>
      <swiper-item><p><span style="color: skyblue;margin:0 10px">荐</span>只知道不知道 兑换【饿了么】畅享美食红包</p></swiper-item>
      <swiper-item><p><span style="color: hotpink;margin:0 10px">荐</span>基本世神 兑换《传奇世界H5》畅玩级礼包</p></swiper-item>
    </swiper>
    <grid :cols="4">
      <grid-item :label="item.label" v-for="(item,index) in lists" :key="index" :link="item.link">
        <img slot="icon" :src='item.img'>
      </grid-item>
    </grid>
    <div class="split">
      <group-title></group-title>
    </div>
    <div class="notice">
      <group title="公告">
        <cell :title="item.title" :link="'/noticeDetail/'+item.id" v-for="(item,index) in noticeLists" :key="index"></cell>
      </group>
    </div>
    <div class="split">
      <group-title></group-title>
    </div>
    <div class="rent-sale">
      <group title="房屋租售">
        <cell :title="item.content" is-link v-for="(item,index) in rentLists" :key="index">
          <img slot="icon" width="40" height="40" style="display:block;margin-right:5px;" :src="item.img[0]">
        </cell>
      </group>
    </div>
    <div class="split">
      <group-title></group-title>
    </div>
    <div class="seek">
      <group title="邻里求助">
        <cell :title="item.title" is-link v-for="(item,index) in seekLists" :key="index"></cell>
      </group>
    </div>
    <back-top></back-top>
  </div>
</template>
<script>
import { Grid, GridItem, GroupTitle, Group, Cell, Swiper, SwiperItem } from 'vux'
import AppHeader from '../header/header'
import {getHomeData} from '../../api/home'
import backTop from '../common/backTop'
const baseList = [{
  url: 'javascript:',
  img: 'http://img2.imgtn.bdimg.com/it/u=3743116515,2902822329&fm=27&gp=0.jpg',
  title: '心有所归'
}, {
  url: 'javascript:',
  img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3683011337,1953892939&fm=200&gp=0.jpg',
  title: '我的城市'
}, {
  url: 'javascript:',
  img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3266320382,1596044228&fm=200&gp=0.jpg',
  title: '一次旅行'
  // fallbackImg: 'https://static.vux.li/demo/3.jpg'
}]

export default {
  name: 'home',
  data () {
    return {
      lists: [
        {
          img: '',
          label: '小区公告',
          link: '/noticeList'
        },
        {
          img: '',
          label: '事务投票',
          link: '/svote'
        },
        {
          img: '',
          label: '选举投票',
          link: '/xvote'
        },
        {
          img: '',
          label: '治理透明',
          link: '/govern'
        },
        // {
        //   img: '',
        //   label: '一键缴费',
        //   link: 'https://g2.zunweikj.com'
        // },
        {
          img: '',
          label: '物业报修',
          link: '/repaire'
        },
        // {
        //   img: '',
        //   label: '办事指南',
        //   link: 'https://mp.weixin.qq.com/cityservice/index'
        // },
        // {
        //   img: '',
        //   label: '周边服务',
        //   link: 'https://map.baidu.com/mobile/webapp/index/index'
        // },
        // {
        //   img: '',
        //   label: '生活福利',
        //   link: ''
        // },
        {
          img: '',
          label: '房屋租售',
          link: '/rentSale'
        },
        {
          img: '',
          label: '邻里求助',
          link: '/seekHelp'
        },
        {
          img: '',
          label: '邻里闲置',
          link: '/unused'
        }
      ],
      noticeLists: '',
      rentLists: '',
      seekLists: '',
      index: '',
      dataList: baseList
    }
  },
  components: {
    AppHeader,
    Grid,
    GridItem,
    GroupTitle,
    Group,
    Cell,
    Swiper,
    SwiperItem,
    backTop
  },
  created () {
    this._getHomeData()
    console.log(this.index)
  },
  methods: {
    _getHomeData () {
      getHomeData(204).then(res => {
        if (res.code === 200) {
          this.noticeLists = res.data.article
          this.rentLists = res.data.house
          this.seekLists = res.data.neighbor
        }
      })
    },
    onIndexChange (index) {
      this.index = index
    }
  }
}
</script>

<style lang='less'>
  .home{
    margin-bottom: 48px;
    .vux-slider > .vux-swiper{
      line-height: 30px;
      p{
        text-overflow: ellipsis;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 14px;
      }
    }
    .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active{
      background-color: #0078de;
    }
    .weui-grid{
      padding: 10px 10px;
    }
    .weui-grid:before{
      border-right: 1px solid transparent;
    }
    .weui-grid:after{
      border-bottom: 1px solid transparent;
    }
    .split .weui-cells__title{
      height: 10px;
      background-color: #f2f2f2;
      margin: 0;
    }
    .notice,.rent-sale,.seek{
      .weui-cells__title{
        font-size: 16px;
        font-weight: 900;
        font-family: '微软雅黑';
        color: #000;
      }
    }
  }
</style>
